/**
 * 静态组件
 * 创建 初始化数据  渲染
 *
 * 动态组件
 * 组件传值 更新数据状态
 */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class CommentAdd extends Component {
  proptypes = {
    addComment: PropTypes.func.isRequired,
  }
  state = {
    username: '',
    content: '',
  }
  add = () => {
    console.log('add')
    //获取到添加的评论 使用受控组件 和 非受控组件两种方式
    const comment = {
      username: this.state.username,
      content: this.refs.content.value,
    }

    // 添加评论
    this.props.addComment(comment)
    // 清空输入数据
    this.setState({ username: '' })
    this.refs.content.value = ''
  }
  changeName = (event) => {
    const username = event.target.value
    this.setState({ username })
  }
  render() {
    return (
      <div className="col-md-4">
        <form className="form-horizontal">
          <div className="form-group">
            <label>用户名</label>
            <input
              type="text"
              className="form-control"
              placeholder="用户名"
              value={this.state.username}
              onChange={this.changeName}
            ></input>
          </div>
          <div className="form-group">
            <label>评论内容</label>
            <textarea
              className="form-control"
              rows="6"
              placeholder="评论内容"
              ref="content"
            ></textarea>
          </div>
          <div className="form-group">
            <div className="col-sm-offset-2 col-sm-10">
              <button
                type="button"
                className="btn btn-default pull-right"
                onClick={this.add}
              >
                提交
              </button>
            </div>
          </div>
        </form>
      </div>
    )
  }
}
export default CommentAdd
